<template>
  <div class="map_main">
    <div id="map" class="map">
      <div v-show="popupShow" id="popup" class="ol_popup_new">
        <div class="popup_head">
          <span class="pop_title">{{ popData.title }}</span>
          <a href="#" id="popup-closer" class="popup_closer"></a>
        </div>
        <div class="popup_top d_a_c">
          <div class="popup_img_box d_c">
            <img :src="popData.img" alt="" />
          </div>
          <div class="ol_popup_info">
            <div class="row_2">
              <span class="label">注册资本：</span>
              <span class="value">1600万</span>
            </div>
            <div class="row_2">
              <span class="label">注册时间：</span>
              <span class="value">2007-05-12</span>
            </div>
            <div class="row_2">
              <span class="label">联系电话：</span>
              <span class="value">15812354569</span>
            </div>
            <div class="row_2">
              <span class="label">年度产值：</span>
              <span class="value">2000万</span>
            </div>
            <div class="row_1">
              <span class="label">联系地址：</span>
              <span class="value">{{ popData.title }}</span>
            </div>
            <div class="row_1">
              <span class="label">公司官网：</span>
              <span class="value">http://867060.51sole.com/</span>
            </div>
          </div>
        </div>
        <div class="popup_bottom">
          <span class="origin">简介：</span>
          <span class="blue"> {{ popData.content }}</span>
        </div>
      </div>
      <div v-show="dwPopupShow" id="dwPopup" class="ol_popup_new2">
        <div class="dw_popup_head">
          <span class="dw_pop_title">{{ dwPopData.areaName }}</span>
          <div class="dw_popup_closer pointer" id="dwPopupCloser"></div>
        </div>
        <div class="dw_popup_top d_a_c">
          <div class="dw_popup_img_box d_c">
            <div class="dw_popup_tab d_a_c">
              <div
                @click="popShowType = popShowType == 0 ? 1 : 0"
                class="dw_tab tab_1 d_a_c pointer"
              >
                <img src="@/assets/img/icon_sp.png" alt="" />
                <div>图片/视频</div>
              </div>
              <div class="dw_tab tab_2 d_a_c pointer">
                <img src="@/assets/img/icon_jk.png" alt="" />
                <div>监控</div>
              </div>
            </div>
            <el-carousel trigger="click" height="270px">
              <template v-if="popShowType == 0">
                <el-carousel-item
                  v-for="(item, index) in dwPopData.imgs"
                  :key="index"
                >
                  <img class="carousel_img" :src="item" alt="" />
                </el-carousel-item>
              </template>
              <el-carousel-item v-else>
                <video class="carousel_img" controls autoplay>
                  <source :src="dwPopData.video" type="video/mp4" />
                  <source :src="dwPopData.video" type="video/ogg" />
                  <source :src="dwPopData.video" type="video/webm" />
                </video>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="dw_ol_popup_info">
            <div class="row_1">
              <span class="label">总产值：</span>
              <span class="value">{{ dwPopData.price }}</span>
              <span class="value" v-if="dwPopData.price"> 万元</span>
            </div>
            <div class="row_1">
              <span class="label">年产量：</span>
              <span class="value">{{ dwPopData.yield }}</span>
            </div>
            <div class="row_1">
              <span class="label">面积：</span>
              <span class="value">{{ dwPopData.planArea }}</span>
            </div>
            <div class="row_1">
              <span class="label">联系人：</span>
              <span class="value">{{ dwPopData.lxr }}</span>
            </div>
            <div class="row_1">
              <span class="label">联系电话：</span>
              <span class="value">{{ dwPopData.contact }}</span>
            </div>
            <div class="row_1">
              <span class="label">联系地址：</span>
              <span class="value">{{ dwPopData.address }}</span>
            </div>
          </div>
        </div>
        <div class="dw_popup_bottom">
          <span class="origin">简介：</span>
          <span class="blue"> {{ dwPopData.profile }}</span>
        </div>
      </div>
    </div>
    <el-select
      class="sjtc_select"
      v-model="gradeSelect"
      placeholder="市级图层"
      @change="onchangTool()"
    >
      <el-option
        v-for="item in sjtcSelectList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      class="wxdt_select"
      v-model="mapSelect"
      placeholder="卫星地图"
      @change="onChangeMap(mapSelect)"
    >
      <el-option
        v-for="item in wxdtSelectList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    
    <div class="btn cy_select" @click="openChildren(cySelectOptions[0])">地图定位</div>
    <div class="btn dl_select" @click="drawPolygon">
      自定义围栏
    </div>

    <cockpit v-if="cockpitShow" />

    <img
      v-if="!isFullscreen"
      draggable="false"
      class="icon_p"
      src="@/assets/img/icon_quan.png"
      alt=""
      @click="changFullscreen(true)"
    />
    <img
      v-else
      draggable="false"
      class="icon_p"
      src="@/assets/img/icon_suo.png"
      alt=""
      @click="changFullscreen(false)"
    />
    <img
      draggable="false"
      class="map_top"
      src="@/assets/img/map_top2.png"
      alt=""
    />
    <img
      draggable="false"
      class="map_bottom"
      src="@/assets/img/map_bottom2.png"
      alt=""
    />
  </div>
</template>
 
<script>
import { XYZ, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import TileLayer from "ol/layer/Tile";
import { transform } from "ol/proj";
import { Style, Fill, Text, Stroke, Icon, Circle } from "ol/style";
import { Feature, Map, View, Overlay } from "ol";
import { LineString, Point, Polygon } from "ol/geom";
import { areaFomart } from "@/utils/areaFomart.js";
import { areaTransform } from "@/utils/areaTransform.js";
import sxCity from "@/assets/json/sx_city";
import sxCounty from "@/assets/json/sx_county";
import sxProvince from "@/assets/json/sx_province";
import cydata from "@/assets/json/cydata";
import * as olSphere from "ol/sphere";
import $ from "jquery";
import Draw from "ol/interaction/Draw";
import * as olProj from "ol/proj";
import { unByKey } from "ol/Observable";
import Cockpit from "./components/Cockpit.vue";

export default {
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
    cyDataList: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    Cockpit,
  },
  data() {
    return {
      tk: "c4c6006207e9d586f12301da93c385eb", // 天地图tk
      searchValue: "", //检索框内容
      cyShow: false, // 产业选择内容展示
      mapDescShow: false, // 概况介绍
      cySelectOptions: [
        {
          name: "产业规划",
          number: 124,
          icon: "/img/icon_city1.png",
          backgroundColor: "#192E5C",
          isOpen: false,
          children: [],
        },
        {
          name: "物联网",
          number: 124,
          icon: "/img/icon_city3.png",
          backgroundColor: "#192E5C",
          isOpen: false,
          children: [],
        },
        {
          name: "基础配置",
          number: 56,
          icon: "/img/icon_city1.png",
          backgroundColor: "#192E5C",
          isOpen: false,
          children: [],
        },
      ],
      map: null,
      cyNav: [],
      layers: [], // 地图类型图层
      mapSelect: "Aerial", //地图类型选择
      mapType: ["RoadOnDemand", "Aerial"], // 地图类型
      gradeSelect: "", //工具选择
      popData: {}, //产业弹出层数据
      mapPoints: [
        {
          title: "怀仁陶瓷E镇孵化中心",
          img: "/img/bj.png",
          content:
            "以产业发展为核心，坚持创新驱动、绿色发展，着力提升供给效率 。着力提升供给效率水平 ， 以提升电商应用水平为重点，线上线下融合为抓手，培育壮大陶瓷 e 镇市场主体 ，充分释放怀仁陶瓷的产业资源和发展潜力，为带动中国 陶瓷产业整体升级 ，参与到全球陶瓷产业的竞争。",
          point: [12592070.429225631, 4835467.284695754],
        },
        {
          title: "怀仁市亿家亲陶瓷有限责任公司",
          img: "/img/bj.png",
          content:
            "于2018年03月21日在怀仁市市场监督管理局注册成立着力提升供给效率。成立，注册资本为1000（万元），在公司发展壮大的4年里，我们始终为客户提供好的产品和技术支持、健全的售后服务，我公司主要经营生产加工酒店日用瓷，拥有好的产品和专业的销售、技术团队。",
          point: [12592182.098946642, 4835458.924395785],
        },
        {
          title: "怀仁市龙欣瓷业有限责任公司",
          img: "/img/bj.png",
          content:
            "公司始建于2002年,一期投资1600万元,占地面积 。积53300多平方米,拥有国内的煤气烧隧道窑,年生产日用陶瓷1200多万件,煅烧高岭土1万吨。公司生产经营高白瓷、强化瓷、釉下釉中釉上花瓷三大系列,100多个品种。产品内销国内北京、上海、杭州等城市,运营欧美市场,其产品具有中国陶瓷的显著特点,坚固洁白、晶莹剔透、光润如玉,浑厚凝重。",
          point: [12592319.446731841, 4835455.341410084],
        },
      ], //产业定位数组
      mapCenterPoint: [113.129754, 39.821035], //地图中心点。怀仁市
      lineSource: null,
      popup: null, //产业详情弹出层
      dwPopup: null, // 产业分布详情弹出层
      dwPopupShow: false, // 弹出层是否显示
      dwPopData: {}, //弹出层数据
      mapDesc: {
        name: "怀仁市",
        desc: "怀仁市山西省辖县级市，由朔州市代管，位于山西省北部、桑干河上游，地处山西省雁门关外、大同盆地中部，总面积1234平方千米， [13] 属北温带大陆性季风气候。",
        imgList: ["/img/bj.png", "/img/bj.png", "/img/bj.png"],
        cyList: [
          {
            name: "第一产业",
            type: "养殖业、种植业",
            product: "绿豆、羊肉",
            yield: "6200吨",
            area: "1570亩",
            output: "1.263亿元",
          },
          {
            name: "第二产业",
            type: "养殖业、种植业",
            product: "绿豆、羊肉",
            yield: "6200吨",
            area: "1570亩",
            output: "1.263亿元",
          },
          {
            name: "第三产业",
            type: "养殖业、种植业",
            product: "绿豆、羊肉",
            yield: "6200吨",
            area: "1570亩",
            output: "1.263亿元",
          },
        ],
      }, //地理概况
      popupShow: false, //弹出层是否展示
      dwLayer: [], // 定位点渲染层
      fenceVector: null, //单地图热区
      cyVector: [], //产业分布热区
      provinceVector: null, //省热区
      provinceFeature: null, //省，用于缩放
      cityVector: [], //市热区
      countyVector: [], //县热区
      textVector: [], //文字图层
      defaultProps: {
        children: "children",
        label: "label",
      }, // 树结构默认配置
      colorList: [
        // 绿色
        {
          strokeColor: "#6ECF76",
          fillColor: [110, 207, 118, 0.5],
        }, // 青绿色
        {
          strokeColor: "#ACC35F",
          fillColor: [172, 195, 95, 0.5],
        }, // 橘色
        {
          strokeColor: "#EFB400",
          fillColor: [239, 180, 0, 0.5],
        }, // 紫色
        {
          strokeColor: "#937BE9",
          fillColor: [147, 123, 233, 0.5],
        }, // 蓝色
        {
          strokeColor: "#72BAE8",
          fillColor: [114, 186, 232, 0.5],
        },
        {
          strokeColor: "#CC86A3",
          fillColor: [204, 134, 163, 0.5],
        },
        {
          strokeColor: "#DEA39A",
          fillColor: [222, 163, 154, 0.5],
        },
      ], //热区颜色配置
      provinceArea: null, //省热区数据
      cityArea: [], //市热区数据
      countyArea: [], //县热区数据
      draw: null, //测量图层
      drawSource: null,
      drawSketch: null,
      drawListener: null,
      drawMeasureTooltipElement: null,
      drawMeasureTooltip: null,
      drawMeasureTooltipList: [],
      drawHelpTooltipElement: null,
      drawHelpTooltip: null,
      wgs84Sphere: null,
      drawVector: [],
      mapMouseMove: null,
      isMeasure: false,
      zxMapCenter: [],
      dwMapCenter: [],
      ssrhSelect: "",
      ssrhSelectList: [
        {
          value: "生产",
          label: "生产",
          icon: "icon-shengchan",
        },
        {
          value: "生活",
          label: "生活",
          icon: "icon-shenghuo",
        },
        {
          value: "生态",
          label: "生态",
          icon: "icon-shengtai",
        },
      ],
      swytSelect: "",
      swytSelectList: [
        {
          value: "产业",
          label: "产业",
          icon: "icon-changnye",
        },
        {
          value: "社区",
          label: "社区",
          icon: "icon-shequ",
        },
        {
          value: "文化",
          label: "文化",
          icon: "icon-wenhua",
        },
        {
          value: "旅游",
          label: "旅游",
          icon: "icon-lvyou",
        },
      ],
      ykzSelect: "",
      ykzSelectList: [
        {
          value: "便民生活圈",
          label: "便民生活圈",
          icon: "icon-shq",
        },
      ],
      rmsjSelect: "",
      rmsjSelectList: [
        {
          value: "电商企业",
          label: "电商企业",
          icon: "icon-qiye",
        },
        {
          value: "个体户",
          label: "个体户",
          icon: "icon-getihu",
        },
        {
          value: "监控",
          label: "监控",
          icon: "icon-jiankong",
        },
        {
          value: "环境监测",
          label: "环境监测",
          icon: "icon-huanjingjiance",
        },
      ],
      sjtcSelectList: [
        {
          value: "province",
          label: "省级图层",
        },
        {
          value: "city",
          label: "市级图层",
        },
        {
          value: "district",
          label: "县级图层",
        },
        {
          value: "tool_ju",
          label: "测距",
        },
        {
          value: "tool_mian",
          label: "测面",
        },
        {
          value: "clear",
          label: "清除",
        },
      ],
      wxdtSelectList: [
        {
          value: "Aerial",
          label: "卫星图",
        },
        {
          value: "RoadOnDemand",
          label: "平面图",
        },
      ],
      cockpitShow: false,
      popShowType: 0,
    };
  },
  mounted() {
    this.initMap();
    this.mapPoint();
    this.getproductNavFun();
  },
  // 监测头部的定位改变来动态渲染地图图层
  watch: {
    "$store.state.mapGeom": {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal != null) {
          if (this.fenceVector) {
            this.map.removeLayer(this.fenceVector);
          }
          let area = areaTransform(newVal.geom);
          area.name = newVal.name;
          area.center = newVal.center.split(",");
          this.isMeasure = false;
          if (this.mapMouseMove != null) {
            this.map.removeInteraction(this.draw);
            unByKey(this.mapMouseMove);
          }
          this.clearLayer();
          this.zxMapCenter = [];
          this.setFenceSource(area, "fence", 2, true);
        }
      },
    },
  },
  methods: {
    drawPolygon() {
      if (this.cyDataList.length > 0) {
        this.clearLayer();
        this.cyDataList.forEach((x, index) => {
          let lonlat = areaTransform(x.lonlat);
          let data = {
            area: x.geom,
            name: x.areaName,
            center: lonlat.path[0],
          };
          this.handleSelectFence(data, index);
        });
      }
    },
    // 初始化地图
    initMap() {
      this.layers = [];
      let i, ii;
      for (i = 0, ii = this.mapType.length; i < ii; ++i) {
        if (i == 0) {
          this.layers.push(
            new TileLayer({
              visible: false,
              preload: Infinity,
              source: new XYZ({
                url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
              }),
            })
          );
        } else {
          this.layers.push(
            new TileLayer({
              visible: false,
              preload: Infinity,
              source: new XYZ({
                url: `http://t{0-6}.tianditu.com/DataServer?T=img_w&tk=${this.tk}&x={x}&y={y}&l={z}`,
              }),
            })
          );
        }
      }
      this.map = new Map({
        layers: this.layers,
        target: "map",
        view: new View({
          // center: olProj.fromLonLat(this.mapCenterPoint),
          center: this.mapCenterPoint,
          zoom: 14,
          maxZoom: 18,
          projection: "EPSG:4326",
        }),
        controls: [],
      });
      /**
       * 为map添加点击事件监听，渲染弹出popup
       */
      this.map.on("singleclick", (evt) => {
        console.log("点击了地图");
        
        if (this.isMeasure) return; // 如果是测量工具时，停止事件
        //判断当前单击处是否有要素
        let feature = this.map.forEachFeatureAtPixel(
          evt.pixel,
          function (feature, layer) {
            return feature;
          }
        );
        if (feature) {
          if (this.popup != null) {
            this.popup.setPosition(undefined);
          }
          if (this.dwPopup != null) {
            this.dwPopup.setPosition(undefined);
          }
          let hanlderPoint = feature.values_.geometry.flatCoordinates;

          // 判断是否有定位的点点击
          let handlerInfo = this.mapPoints.filter(
            (x) =>
              x.point[0] == hanlderPoint[0] && x.point[1] == hanlderPoint[1]
          );
          if (this.popup != null && this.popup.getPosition() == undefined) {
            if (handlerInfo.length != 0) {
              this.popData = handlerInfo[0];
              this.popupShow = true;
              this.popup.setPosition(handlerInfo[0].point);
              return;
            }
          }
          // 判断是否点击定位的文字
          handlerInfo = this.dwMapCenter.filter(
            (x) =>
              x.center[0] == hanlderPoint[0] && x.center[1] == hanlderPoint[1]
          );
          if (this.dwPopup != null && this.dwPopup.getPosition() == undefined) {
            if (handlerInfo.length != 0) {
              let dwPopData = this.cyDataList.find(
                (x) => x.areaName === handlerInfo[0].name
              );
              this.dwPopData = dwPopData;
              this.dwPopupShow = true;
              this.dwPopup.setPosition(handlerInfo[0].center);
              return;
            }
          }
          // 判断是否有地图文字的点击
          handlerInfo = this.zxMapCenter.filter(
            (x) =>
              x.center[0] == hanlderPoint[0] && x.center[1] == hanlderPoint[1]
          );
          let regionTree = this.$store.state.regionTree;
          if (handlerInfo.length > 0 && regionTree.length > 0) {
            let result = this.callBackFind(regionTree[0], handlerInfo[0].name);
            if (result != null) {
              if (result?.children?.length > 0) {
                this.isMeasure = false;
                if (this.mapMouseMove != null) {
                  this.map.removeInteraction(this.draw);
                  unByKey(this.mapMouseMove);
                }
                this.clearLayer();
                this.zxMapCenter = [];
                for (let i = 0; i < result.children.length; i++) {
                  if (result.children[i].geom == null) return;
                  if (
                    result.children[i].label == "泽州县" ||
                    result.children[i].label == "郊区"
                  ) {
                    let areas = result.children[i].geom.split("|");
                    areas.forEach((x) => {
                      let area = areaTransform(x);
                      area.name = result.children[i].label;
                      area.center = result.children[i].lonlat.split(",");
                      this.cityVector.push(area);
                      this.setFenceSource(area, result.children[i].mapLevel, i);
                    });
                  } else {
                    let area = areaTransform(result.children[i].geom);
                    area.name = result.children[i].label;
                    area.center = result.children[i].lonlat.split(",");
                    this.cityVector.push(area);
                    this.setFenceSource(area, result.children[i].mapLevel, i);
                  }
                }
                if (result?.mapLevel == "city") {
                  let area = areaTransform(result.geom);
                  let feature = new Feature(new Polygon([area.path]));
                  this.mapFit(feature.getGeometry());
                }
              }
            }
          }
        }
      });
      this.onChangeMap();
    },
    // 递归去寻找点击要素
    callBackFind(obj, targe) {
      let res = null;
      if (obj.label == targe) {
        res = obj;
        return res;
      } else if (obj?.children?.length > 0) {
        for (let i = 0; i < obj.children.length; i++) {
          res = this.callBackFind(obj.children[i], targe);
          if (res != null) {
            return res;
          }
        }
      } else {
        return res;
      }
    },
    //加载 测量交互绘制控件函数
    addInteraction() {
      var type = "Polygon";
      if (this.gradeSelect == "tool_ju") {
        type = "LineString";
      } else if (this.gradeSelect == "tool_mian") {
        type = "Polygon";
      }
      this.draw = new Draw({
        source: this.drawSource, //测量绘制层数据源
        type: type, //几何图形类型
        style: new Style({
          //绘制几何图形的样式
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            color: "rgba(0, 0, 0, 0.5)",
            lineDash: [10, 10],
            width: 2,
          }),
          image: new Circle({
            radius: 5,
            stroke: new Stroke({
              color: "rgba(0, 0, 0, 0.7)",
            }),
            fill: new Fill({
              color: "rgba(255, 255, 255, 0.2)",
            }),
          }),
        }),
      });
      this.map.addInteraction(this.draw);

      this.createMeasureTooltip(); //创建测量工具提示框
      this.createHelpTooltip(); //创建帮助提示框
      //绑定交互绘制工具开始绘制的事件
      this.draw.on("drawstart", (evt) => {
        // set sketch
        this.drawSketch = evt.feature; //绘制的要素
        var tooltipCoord = evt.coordinate; // 绘制的坐标
        //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
        this.drawListener = this.drawSketch
          .getGeometry()
          .on("change", (evt) => {
            var geom = evt.target; //绘制几何要素
            var output;
            if (geom instanceof Polygon) {
              output = this.formatArea(geom); //面积值
              tooltipCoord = geom.getInteriorPoint().getCoordinates(); //坐标
            } else if (geom instanceof LineString) {
              output = this.formatLength(geom); //长度值
              tooltipCoord = geom.getLastCoordinate(); //坐标
            }
            this.drawMeasureTooltipElement.innerHTML = output; //将测量值设置到测量工具提示框中显示
            this.drawMeasureTooltip.setPosition(tooltipCoord); //设置测量工具提示框的显示位置
          });
      });
      //绑定交互绘制工具结束绘制的事件
      this.draw.on("drawend", (evt) => {
        this.drawMeasureTooltipElement.className = "tooltip tooltip-static"; //设置测量提示框的样式
        this.drawMeasureTooltip.setOffset([0, -7]);
        // unset sketch
        this.drawSketch = null; //置空当前绘制的要素对象
        // unset tooltip so that a new one can be created
        this.drawMeasureTooltipElement = null; //置空测量工具提示框对象
        this.createMeasureTooltip(); //重新创建一个测试工具提示框显示结果
        unByKey(this.drawListener);
      });
    },
    // 加载测量的绘制矢量层
    measure() {
      //加载测量的绘制矢量层
      this.drawSource = new VectorSource(); //图层数据源
      let vector = new VectorLayer({
        source: this.drawSource,
        style: new Style({
          //图层样式
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)", //填充颜色
          }),
          stroke: new Stroke({
            color: "#ff0000", //边框颜色
            width: 2, // 边框宽度
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ff0000",
            }),
          }),
        }),
      });
      this.drawVector.push(vector);
      this.map.addLayer(vector);

      /**
       *  当用户正在绘制多边形时的提示信息文本
       * @type {string}
       */
      let continuePolygonMsg = "双击完成测面";
      /**
       * 当用户正在绘制线时的提示信息文本
       * @type {string}
       */
      let continueLineMsg = "双击完成测距";
      let pointerMoveHandler = (evt) => {
        if (evt.dragging) {
          return;
        }
        /** @type {string} */
        let helpMsg = "单击开始"; //当前默认提示信息
        //判断绘制几何类型设置相应的帮助提示信息
        if (this.drawSketch) {
          let geom = this.drawSketch.getGeometry();
          if (geom instanceof Polygon) {
            helpMsg = continuePolygonMsg; //绘制多边形时提示相应内容
          } else if (geom instanceof LineString) {
            helpMsg = continueLineMsg; //绘制线时提示相应内容
          }
        }
        this.drawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
        this.drawHelpTooltip.setPosition(evt.coordinate); //设置帮助提示框的位置
        $(this.drawHelpTooltipElement).removeClass("hidden"); //移除帮助提示框的隐藏样式进行显示
      };
      this.mapMouseMove = this.map.on("pointermove", pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
      //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
      $(this.map.getViewport()).on("mouseout", function () {
        $(this.drawHelpTooltipElement).addClass("hidden");
      });
      this.addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
    },
    // 测量提示
    createHelpTooltip() {
      if (this.drawHelpTooltipElement) {
        this.drawHelpTooltipElement.parentNode.removeChild(
          this.drawHelpTooltipElement
        );
      }
      this.drawHelpTooltipElement = document.createElement("div");
      this.drawHelpTooltipElement.className = "tooltip hidden";
      this.drawHelpTooltip = new Overlay({
        element: this.drawHelpTooltipElement,
        offset: [15, 0],
        positioning: "center-left",
      });
      this.map.addOverlay(this.drawHelpTooltip);
    },
    // 测量结果提示
    createMeasureTooltip() {
      if (this.drawMeasureTooltipElement) {
        this.drawMeasureTooltipElement.parentNode.removeChild(
          this.drawMeasureTooltipElement
        );
      }
      this.drawMeasureTooltipElement = document.createElement("div");
      this.drawMeasureTooltipElement.className = "tooltip tooltip-measure";
      this.drawMeasureTooltip = new Overlay({
        element: this.drawMeasureTooltipElement,
        offset: [0, -15],
        positioning: "bottom-center",
      });
      this.drawMeasureTooltipList.push(this.drawMeasureTooltip);
      this.map.addOverlay(this.drawMeasureTooltip);
    },
    // 测量距离转换
    formatLength(line) {
      // 这里一定要给坐标，和地图坐标保持一致，否则长度不准
      const length = olSphere.getLength(line, { projection: "EPSG:4326" });
      let output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + " " + "km";
      } else {
        output = Math.round(length * 100) / 100 + " " + "m";
      }
      return output;
    },
    // 测量面积转换
    formatArea(polygon) {
      // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
      const area = olSphere.getArea(polygon, { projection: "EPSG:4326" });
      let output;
      if (area > 10000) {
        output =
          Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
      } else {
        output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
      }
      return output;
    },
    mapPoint() {
      this.mapPoints.forEach((x) => {
        x.point = transform(x.point, "EPSG:3857", "EPSG:4326");
      });
    },
    setPoint() {
      var createLabelStyle = function (feature) {
        return new Style({
          image: new Icon(
            /** @type {olx.style.IconOptions} */
            {
              //设置图标点
              anchor: [0.5, 60],
              //图标起点
              anchorOrigin: "top-right",
              //指定x值为图标点的x值
              anchorXUnits: "fraction",
              //指定Y值为像素的值
              anchorYUnits: "pixels",
              //偏移
              offsetOrigin: "bottom-center",
              // offset:[0,10],
              //图标缩放比例
              // scale:0.5,
              //透明度
              opacity: 0.75,
              //图标的url
              src: "/img/icon_ditu.png",
            }
          ),
        });
      };

      this.mapPoints.forEach((x, index) => {
        //实例化Vector要素，通过矢量图层添加到地图容器中
        let iconFeature = new Feature({
          //坐标点
          geometry: new Point(x.point),
          //名称属性
          name: "",
        });
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量标注的数据源
        let vSource = new VectorSource({
          features: [iconFeature],
        });
        //矢量标注图层
        let vLayer = new VectorLayer({
          source: vSource,
        });
        this.dwLayer.push(vLayer);
        this.map.addLayer(vLayer);
        if (this.mapPoints.length - 1 == index) {
          this.mapFit(iconFeature.getGeometry());
        }
      });
      /**
       * 实现popup的html元素
       */
      var container = document.getElementById("popup");
      var closer = document.getElementById("popup-closer");

      /**
       * 在地图容器中创建一个Overlay
       */
      this.popup = new Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        offset: [120, -90],
        //Popup放置的位置
        positioning: "bottom-center",
        //是否应该停止事件传播到地图窗口
        stopEvent: false,
        autoPanAnimation: {
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          duration: 250,
        },
      });
      this.map.addOverlay(this.popup);

      /**
       * 添加关闭按钮的单击事件（隐藏popup）
       * @return {boolean} Don't follow the href.
       */
      closer.onclick = () => {
        //未定义popup位置
        this.popup.setPosition(undefined);
        // if (this.lineSource != null) {
        //   this.lineSource.clear();
        // }
        //失去焦点
        closer.blur();
        this.popupShow = false;
        return false;
      };
      /**
       * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
       */
      this.map.on("pointermove", (e) => {
        var pixel = this.map.getEventPixel(e.originalEvent);
        var hit = this.map.hasFeatureAtPixel(pixel);
        this.map.getTargetElement().style.cursor = hit ? "pointer" : "";
      });
    },
    setLine(startPoint) {
      if (this.lineSource != null) {
        this.lineSource.clear();
      }
      //创建一个线
      var Line = new Feature({
        geometry: new LineString([
          startPoint,
          [12592319.446731841, 4835455.341410084],
        ]),
      });

      //设置线的样式
      Line.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          //边线颜色
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2,
          }),
        })
      );

      //实例化一个矢量图层Vector作为绘制层
      this.lineSource = new VectorSource({
        features: [Line],
      });
      //创建一个图层
      var vector = new VectorLayer({
        source: this.lineSource,
      });
      //将绘制层添加到地图容器中
      this.map.addLayer(vector);
    },
    // 切换地图类型
    onChangeMap() {
      for (let i = 0, ii = this.layers.length; i < ii; ++i) {
        this.layers[i].setVisible(this.mapType[i] === this.mapSelect);
      }
    },
    // 展开产业选择菜单
    async openChildren(item) {
      if (item.isOpen) {
        item.isOpen = false;
        return;
      }
      let children = await this.getproductNavFun();
      item.children = children;
      this.cySelectOptions.map((res) => (res.isOpen = false));
      item.isOpen = true;
      this.setPoint();
    },
    // 获取产业选择菜单
    getproductNavFun() {
      return new Promise((resolve, reject) => {
        // getproductNav().then((res) => {
        //   if (res?.code == 200) {
        //     resolve(res.data);
        //   }
        // });
        resolve(cydata.data);
      });
    },
    // 全屏
    changFullscreen(isFull) {
      this.$emit("changFullscreen", isFull);
    },
    handleSelectFence(data, index) {
      if (!data) {
        return;
      }
      if (this.fenceVector) {
        this.map.removeLayer(this.fenceVector);
      }
      const area = areaTransform(data.area);
      area.name = data.name;
      area.center = data.center;
      this.setFenceSource(area, "cy", index, true, "dw", [200, 100, 200, 100]);
      this.initOverlay();
    },
    initOverlay() {
      var container = document.getElementById("dwPopup");
      var closer = document.getElementById("dwPopupCloser");

      this.dwPopup = new Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: "center-right",
        offset: [700, -250],
        //是否应该停止事件传播到地图窗口
        stopEvent: false,
        autoPanAnimation: {
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          duration: 250,
        },
      });
      this.map.addOverlay(this.dwPopup);

      closer.onclick = () => {
        //未定义popup位置
        this.dwPopup.setPosition(undefined);
        closer.blur();
        this.dwPopupShow = false;
        this.popShowType = 0;
        return false;
      };
      /**
       * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
       */
      this.map.on("pointermove", (e) => {
        var pixel = this.map.getEventPixel(e.originalEvent);
        var hit = this.map.hasFeatureAtPixel(pixel);
        this.map.getTargetElement().style.cursor = hit ? "pointer" : "";
      });
    },
    // 图层文字样式
    createLabelStyle(feature, textType) {
      let color = "#000";
      let font = "normal 14px 微软雅黑";
      if (textType == "dw") {
        color = "#FFC6AE";
        font = "normal 18px 微软雅黑";
      }
      return new Style({
        text: new Text({
          //位置
          textAlign: "center",
          //基准线
          textBaseline: "middle",
          //文字样式
          font: font,
          //文本内容
          text: feature.get("name"),
          //文本填充样式（即文字颜色）
          fill: new Fill({ color: color }),
          stroke: new Stroke({ color: color, width: 1 }),
        }),
      });
    },
    // 设置围栏
    setFenceSource(
      area,
      type,
      index = 0,
      needFit = false,
      textType = "zx",
      padding = [50, 0, 50, 0]
    ) {
      let feature;
      switch (area.type) {
        case "Circle": {
          feature = new Feature(new Circle(area.center, area.radius));
          break;
        }
        case "Polygon": {
          feature = new Feature(new Polygon([area.path]));
          break;
        }
        case "Point": {
          feature = new Feature(new Point(area.path[0]));
          break;
        }
        case "LineString": {
          feature = new Feature(new LineString(area.path));
          break;
        }
        default:
          break;
      }
      if (needFit) {
        if (area.type === "Point") {
          this.mapAnimate(area.path[0]);
        } else {
          this.mapFit(feature.getGeometry(), padding);
        }
      }

      let source = new VectorSource({
        features: [feature],
      });
      let vector = new VectorLayer({
        source,
        style: new Style({
          fill: new Fill({
            color: this.colorList[index % this.colorList.length].fillColor,
          }),
          stroke: new Stroke({
            color: this.colorList[index % this.colorList.length].strokeColor,
            width: 1,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: this.colorList[index % this.colorList.length].fillColor,
            }),
          }),
        }),
      });
      switch (type) {
        case "fence":
          this.fenceVector = vector;
          break;
        case "cy":
          this.cyVector.push(vector);
          break;
        case "province":
          if (this.provinceFeature == null) {
            this.mapFit(feature.getGeometry());
          }
          this.provinceVector = vector;
          this.provinceFeature = feature;
          break;
        case "city":
          this.cityVector.push(vector);
          break;
        case "district":
          this.countyVector.push(vector);
          break;
      }
      this.map.addLayer(vector);

      // 文字渲染
      if (area?.name && area?.center?.length > 0) {
        let iconFeature = new Feature({
          geometry: new Point(area.center),
          name: area.name,
        });
        if (textType == "zx") {
          this.zxMapCenter.push(area);
        } else if (textType == "dw") {
          this.dwMapCenter.push(area);
        }
        iconFeature.setStyle(this.createLabelStyle(iconFeature, textType));
        //矢量标注的数据源
        let vectorSource = new VectorSource({
          features: [iconFeature],
        });
        //矢量标注图层
        let vectorLayer = new VectorLayer({
          source: vectorSource,
        });
        this.textVector.push(vectorLayer);
        this.map.addLayer(vectorLayer);
      }
    },
    // 按边界缩放
    mapFit(extent, padding = [50, 0, 50, 0]) {
      this.map.getView().fit(extent, { duration: 1000, padding });
    },
    // 改变中心点
    mapAnimate(lonlat) {
      this.map.getView().animate({
        center: lonlat,
      });
    },
    // 渲染省行政热区
    async rendGrandProvince() {
      if (this.provinceArea == null) {
        let res = sxProvince;
        this.provinceArea = {
          type: "Polygon",
          path: res.geometry.coordinates[0][0],
          name: res.properties.name,
          center: res.properties.centroid,
        };
        this.setFenceSource(this.provinceArea, "province");
      } else {
        this.setFenceSource(this.provinceArea, "province");
      }
    },
    // 渲染市行政热区
    async rendGrandCity() {
      if (this.cityArea.length == 0) {
        let res = sxCity;
        if (res.features.length > 0) {
          for (let i = 0; i < res.features.length; i++) {
            let area = {
              type: "Polygon",
              path: res.features[i].geometry.coordinates[0][0],
              name: res.features[i].properties.name,
              center: res.features[i].properties.centroid,
            };
            this.cityArea.push(area);
            this.setFenceSource(area, "city", i);
          }
        }
      } else {
        this.cityArea.forEach((x, index) => {
          this.setFenceSource(x, "city", index);
        });
      }
    },
    // 渲染县行政热区
    async rendGrandCounty() {
      if (this.countyArea.length == 0) {
        let res = sxCounty;
        if (res.features.length > 0) {
          for (let i = 0; i < res.features.length; i++) {
            if (res.features[i].geometry?.coordinates?.length > 0) {
              res.features[i].geometry?.coordinates.forEach((x) => {
                let area = {
                  type: "Polygon",
                  path: x[0],
                  name: res.features[i].properties.name,
                  center: res.features[i].properties.centroid,
                };
                this.countyArea.push(area);
                this.setFenceSource(area, "district", i);
              });
            }
          }
        }
      } else {
        this.countyArea.forEach((x, index) => {
          this.setFenceSource(x, "district", index);
        });
      }
    },
    // 切换工具
    onchangTool() {
      if (
        this.gradeSelect == "province" ||
        this.gradeSelect == "city" ||
        this.gradeSelect == "district"
      ) {
        this.zxMapCenter = [];
        this.onChangeGrand();
        this.isMeasure = false;
      } else if (this.gradeSelect == "tool_ju") {
        this.isMeasure = true;
        this.map.removeInteraction(this.draw); //移除绘制图形
        if (this.drawSource == null) {
          this.measure();
        } else {
          this.addInteraction(); //添加绘图进行测量
        }
      } else if (this.gradeSelect == "tool_mian") {
        this.isMeasure = true;
        this.map.removeInteraction(this.draw); //移除绘制图形
        if (this.drawSource == null) {
          this.measure();
        } else {
          this.addInteraction(); //添加绘图进行测量
        }
      } else if (this.gradeSelect == "clear") {
        this.isMeasure = false;
        this.clearLayer();
        this.cancalDraw();
      }
    },
    // 清除图层
    clearLayer() {
      if (this.provinceVector) {
        this.map.removeLayer(this.provinceVector);
      }
      if (this.fenceVector) {
        this.map.removeLayer(this.fenceVector);
      }
      if (this.cyVector.length > 0) {
        this.cyVector.forEach((x) => {
          this.map.removeLayer(x);
        });
        this.cyVector = [];
        this.dwPopup.setPosition(undefined);
      }
      if (this.cityVector.length > 0) {
        this.cityVector.forEach((x) => {
          this.map.removeLayer(x);
        });
        this.cityVector = [];
      }
      if (this.countyVector.length > 0) {
        this.countyVector.forEach((x) => {
          this.map.removeLayer(x);
        });
        this.countyVector = [];
      }
      if (this.textVector.length > 0) {
        this.textVector.forEach((x) => {
          this.map.removeLayer(x);
        });
        this.textVector = [];
      }
      if (this.dwLayer.length > 0) {
        this.dwLayer.forEach((x) => {
          this.map.removeLayer(x);
        });
        this.dwLayer = [];
        this.popup.setPosition(undefined);
      }
      this.zxMapCenter = [];
      this.dwMapCenter = [];
    },
    // 清除测量
    cancalDraw() {
      // for (let i = 0; i < this.drawVector.length; i++) {
      //   this.map.removeLayer(this.drawVector[i]);
      // }
      if (this.drawSource == null) return;
      if (this.drawHelpTooltipElement) {
        this.drawHelpTooltipElement.innerHTML = "";
      }
      this.drawSource.clear();
      for (let i = 0; i < this.drawMeasureTooltipList.length; i++) {
        this.map.removeOverlay(this.drawMeasureTooltipList[i]);
      }
      this.drawVector = [];
      this.drawMeasureTooltipList = [];
      this.map.removeInteraction(this.draw);
      unByKey(this.mapMouseMove);
    },
    // 判断是否需要定位到省级图层
    fitProvince() {
      if (
        this.provinceFeature == null &&
        this.$store.state.regionTree != null
      ) {
        let area = areaTransform(this.$store.state.regionTree[0].geom);
        let feature = new Feature(new Polygon([area.path]));
        this.mapFit(feature.getGeometry());
      }
    },
    // 省、市、县切换
    onChangeGrand() {
      this.clearLayer();
      switch (this.gradeSelect) {
        case "province":
          this.rendGrandProvince();
          break;
        case "city":
          this.fitProvince();
          this.rendGrandCity();
          break;
        case "district":
          this.fitProvince();
          this.rendGrandCounty();
          break;
      }
      if (this.provinceFeature != null) {
        this.mapFit(this.provinceFeature.getGeometry());
      }
      // 移除测量功能
      if (this.mapMouseMove != null) {
        this.map.removeInteraction(this.draw);
        unByKey(this.mapMouseMove);
      }
    },
  },
};
</script>
 
<style lang="scss" scoped>
.iconfont {
  color: #0993fd;
  font-size: 22px;
}
.map_main {
  height: 100%;
  width: 100%;
  position: relative;
  .map_desc {
    width: 332px;
    height: 505px;
    background: rgba(14, 25, 105, 0.7);
    position: absolute;
    top: 23px;
    left: 30px;
    z-index: 11;
    .imgs {
      width: 100%;
      img {
        width: 82px;
        height: 43px;
        margin-right: 15px;
        border-radius: 5px;
      }
    }
    .desc {
      text-indent: 2em;
      font-size: 12px;
      text-align: left;
      color: #aed0ef;
    }
    .main_pop {
      width: 100%;
      height: calc(100% - 28px);
      padding: 20px;
      .cy_item {
        .cy_title {
          background: linear-gradient(
            0deg,
            rgba(246, 173, 4, 0.39) 0%,
            rgba(229, 162, 10, 0) 100%
          );
          width: fit-content;
          padding: 0 10px;
          font-size: 12px;
        }
        .cy_more {
          width: 100%;
          flex-wrap: wrap;
          font-size: 12px;
          text-align: left;
          line-height: 25px;
          .cy_more_item {
            width: 50%;
            color: #fff;
          }
        }
      }
      .label {
        justify-content: space-between;
        margin: 6px 0;
        .line {
          width: 80%;
          height: 4px;
        }
        .point {
          height: 10px;
          width: 10px;
        }
        .m_l {
          margin-left: 5px;
        }
        .m_r {
          margin-right: 5px;
        }
        .left_img,
        .right_img {
          width: 33.3%;
          height: auto;
        }
        .l_title {
          color: #009bff;
          width: 33.3%;
          text-align: center;
        }
      }
    }
    .title {
      width: 100%;
      height: 28px;
      background-image: url("@/assets/img/tangkuang_t.png");
      background-size: cover;
      color: #fff;
      line-height: 28px;
      text-align: left;
      padding-left: 30px;
      font-size: 14px;
    }
  }

  .cy_box {
    min-width: 203px;
    min-height: 285px;
    background: rgba(1, 23, 125, 0.43);
    border: 2px solid #01177d;
    border-radius: 4px;
    position: absolute;
    bottom: 70px;
    right: 30px;
    padding: 20px 0;
    max-height: 400px;
    .select_list {
      width: 100%;
      padding: 0 15px;
      margin-top: 5px;
      .select_item,
      .select_item_children {
        width: 100%;
        height: 30px;
        justify-content: space-around;
        color: #aed0ef;
        font-size: 12px;
        margin: 0 auto;
        cursor: pointer;
        background: #192e5c;
      }
      .select_item_children {
        background: #081868;
      }
      .open_btn {
        width: 12px;
        height: auto;
      }
      .icon {
        width: 17px;
        height: 14px;
      }
    }
  }
  .btn {
    width: 130px;
    height: 40px;
    line-height: 40px;
    z-index: 10;
    color: #eef8fe;
    font-size: 14px;
    cursor: pointer;
  }
  .map_top {
    width: 100%;
    height: 45px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .map_bottom {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .dl_select {
    background-image: url("@/assets/img/diligaik.png");
    background-size: cover;
    position: absolute;
    bottom: 20px;
    left: 0;
    text-align: right;
    padding-right: 28px;
    z-index: 10;
  }
  .cy_select {
    background-image: url("@/assets/img/cahnyexuanze.png");
    background-size: cover;
    position: absolute;
    bottom: 20px;
    right: 0;
    text-align: left;
    padding-left: 28px;
    z-index: 10;
  }
  .search_box {
    position: absolute;
    top: 60px;
    z-index: 10;
    right: 20px;
    width: 145px;
    background: rgba(0, 84, 214, 0.22);
    border-radius: 7px;

    .el-input-group__append button.el-button {
      background: #0145ca;
      border: 1px solid #0145ca;
      border-radius: 0px 7px 7px 0px;
      font-size: 12px;
      color: #aad7ff;
    }
  }
  .icon_p {
    position: absolute;
    top: 4px;
    right: 2px;
    height: 30px;
    width: auto;
    cursor: pointer;
    z-index: 100;
  }
  #map {
    height: 100%;
    width: 100%;
    .ol_popup_new {
      width: 445px;
      border: 1px solid #018ce8;
      background-image: url("@/assets/img/tangkuang.png");
      background-size: 100% 100%;
      padding: 25px 10px 10px 10px;
      text-align: left;
      font-size: 12px;
      .popup_head {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 7px;
        width: 100%;
        left: 0;
        padding: 0 9px;
        .pop_title {
          text-align: left;
          color: #f6ad04;
          font-weight: 700;
        }
        .popup_closer {
          text-decoration: none;
          color: #fff;
        }

        .popup_closer:after {
          content: "✖";
        }
      }
      .popup_bottom {
        line-height: 16px;
        margin-top: 12px;
      }
      .popup_top {
        padding: 10px 0;
        border-bottom: 1px dashed #0993fd;
        .ol_popup_info {
          display: flex;
          flex-wrap: wrap;
          font-size: 12px;
          width: 300px;
          line-height: 26px;
          .row_1 {
            width: 100%;
          }
          .row_2 {
            width: 50%;
          }
          .label {
            color: #8fb2e3;
          }
          .value {
            color: #f6ad04;
          }
        }
        .popup_img_box {
          width: 104px;
          height: 89px;
          background: #0a3571;
          border: 1px solid #009bff;
          margin-right: 20px;
          img {
            width: 94px;
            height: 80px;
          }
        }
      }
    }
    .ol_popup_new2 {
      width: 690px;
      border: 1px solid #018ce8;
      background-image: url("@/assets/img/tangkuang.png");
      background-size: 100% 100%;
      padding: 25px 10px 10px 10px;
      text-align: left;
      font-size: 12px;
      .dw_popup_head {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 14px;
        width: 100%;
        left: 0;
        padding: 0 9px;
        .dw_pop_title {
          text-align: left;
          color: #f6ad04;
          font-weight: 700;
          font-size: 14px;
        }
        .dw_popup_closer {
          text-decoration: none;
          color: #fff;
        }

        .dw_popup_closer:after {
          content: "✖";
        }
      }
      .dw_popup_bottom {
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
      }
      .dw_popup_top {
        padding: 10px 0;
        border-bottom: 1px dashed #0993fd;
        .dw_ol_popup_info {
          display: flex;
          font-size: 14px;
          margin-top: 14px;
          width: 300px;
          height: 270px;
          line-height: 20px;
          flex-direction: column;
          .row_1 {
            width: 100%;
            margin-bottom: 20px;
          }
          .row_2 {
            width: 50%;
          }
          .label {
            color: #8fb2e3;
          }
          .value {
            color: #f6ad04;
          }
        }
        .dw_popup_img_box {
          border: 1px solid #009bff;
          margin-right: 10px;
          margin-top: 15px;
          position: relative;
          .dw_popup_tab {
            position: absolute;
            top: 0px;
            left: 0px;
            .dw_tab {
              height: 35px;
              justify-content: center;
              color: #fff;
              z-index: 99999;
              border-radius: 7px;
              div {
                font-size: 12px;
                margin-left: 10px;
              }
            }
            .tab_1 {
              width: 100px;
              background-image: url("@/assets/img/tab_bg.jpg");
              background-size: cover;
            }
            .tab_2 {
              width: 80px;
              background-image: url("@/assets/img/tab_bg.jpg");
              background-size: cover;
              margin-left: 5px;
            }
          }

          .carousel_img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .ol-popup {
      position: absolute;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      padding: 15px;
      bottom: 80px;
      left: -50px;
      background-image: url("@/assets/img/tankuang2.png");
      background-size: cover;
      width: 240px;
      .t_t {
        position: absolute;
        top: -6px;
        left: 3px;
        width: 100%;
        height: auto;
        z-index: -1;
      }
      .title {
        width: 100%;
        justify-content: space-between;
        color: #fff;
        margin-top: -14px;
        div {
          width: 90%;
          font-size: 12px;
          text-align: left;
        }
        span {
          font-size: 12px;
        }
      }
    }

    .ol-popup-closer {
      text-decoration: none;
      color: #fff;
    }

    .ol-popup-closer:after {
      content: "✖";
    }

    #popupContent {
      font-size: 14px;
      font-family: "微软雅黑";

      .popup_img {
        width: 94px;
        height: 49px;
        float: left;
        margin: 0 5px 5px 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        color: #ffffff;
        font-size: 12px;
        text-align: left;
        line-height: 20px;
        letter-spacing: 2px;
        margin-bottom: 0;
        span {
          color: #f6ad04;
        }
      }
    }

    #popupContent .markerInfo {
      font-weight: bold;
    }

    #dwPopup {
      #dwPopupCloser {
        position: absolute;
        top: 0px;
        right: 12px;
        font-size: 18px;
      }
      .dw_popup_img {
        width: 100%;
        margin-top: 20px;
        img {
          width: 100%;
          height: auto;
        }
      }
      p {
        text-align: left;
        color: #fff;
      }
    }
  }
  .ssrh_select {
    position: absolute;
    z-index: 10;
    right: 660px;
    top: -4px;
    width: 110px;
  }
  .swyt_select {
    position: absolute;
    z-index: 10;
    right: 545px;
    top: -4px;
    width: 110px;
  }
  .ykz_select {
    position: absolute;
    z-index: 10;
    right: 428px;
    top: -4px;
    width: 110px;
  }
  .rmsj_select {
    position: absolute;
    z-index: 10;
    right: 310px;
    top: -4px;
    width: 110px;
  }
  .sjtc_select {
    position: absolute;
    z-index: 10;
    right: 192px;
    top: -4px;
    width: 110px;
  }
  .wxdt_select {
    position: absolute;
    z-index: 10;
    right: 50px;
    top: -4px;
    width: 110px;
  }
  .select_option {
    color: #e6f5ff;
    background: #084b90;
    border: 1px solid #009bff;
    width: 110px;
    height: 26px;
    font-size: 14px;
    outline: none;
    position: absolute;

    z-index: 10;
    option {
      width: 100%;
      text-align: center;
    }
  }
}
</style>

<style>
.el-input-group__append {
  background-color: unset !important;
  border: none !important;
}
.el-input-group--append .el-input__inner {
  border: none;
}
.el-select-dropdown {
  border: none !important;
  background: #021e6d !important;
}
.el-select-dropdown__item {
  color: #0993fd !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #033daa !important;
  color: #c1e2fc !important;
}
.el-select-dropdown__item:hover > .iconfont {
  color: #fff !important;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(2, 75, 191, 0.3) !important;
}

.el-select .el-input__inner {
  background: rgba(1, 25, 116, 0.3) !important;
  border-radius: 5px;
  border: none;
  color: #0993fd !important;
  box-shadow: 0px 6px 13px rgb(9 85 211 / 55%);
}
.el-carousel__container {
  height: 270px;
  width: 480px;
}
.el-carousel__item img {
  height: 140px;
  width: 248px;
}

.el-carousel__item video {
  height: 140px;
  width: 248px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__button {
  width: 20px !important;
  background: #0993fd !important;
}
</style>